<!DOCTYPE html>
<html>
<head>
  <title>模态框</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    nav {
      background: #29ABF5;
      padding: 10px;
      color: #fff;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }
    .close {
      float: right;
      text-decoration: none;
      color: #fff;
    }
    section {
      height: 100px;
      padding: 10px;
    }
    footer {
      position: absolute;
      width: 100%;
      padding: 20px 0;
      bottom: 0px;
      background: #F9F9F9;
    }
    .buttons {
      width: 150px;
      margin: 0 auto;
    }
    .shadow {
      position: fixed;
      display: block;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.2);
    }
    .model {
      position: absolute;
      width: 600px;
      height: 200px;
      background: #fff;
      top: 50%;
      left: 50%;
      margin-top: -100px;
      margin-left: -300px;
      border-radius: 5px;
      border: solid 1px #ccc;
    }
    .button {
      display: inline-block;
      width: 70px;
      height: 30px;
      background: #fff;
      color: #ccc;
      text-align: center;
      text-decoration: none;
      line-height: 30px;
      border-radius: 5px;
      border: solid 1px #ccc;
    }
    .ok {
      background: #29ABF5;
      color: #fff;
      border: none;
    }
    @keyframes show
    {
    0%   {top: 0;}
    100% {top: 50%;}
    }
    @keyframes hide
    {
    0%   {top: 50%;}
    100% {top: 0;}
    }
  </style>
  <script>
    function openTest(time) {
      document.getElementById('model').style.display = 'block';
      document.getElementsByClassName('model')[0].style = `animation: show ${time}s linear`;
    }
    function closeTest(time) {
      document.getElementsByClassName('model')[0].style = `animation: hide ${time}s linear`;
      setTimeout(function() {
        document.getElementById('model').style.display = 'none';
      },time*1000);
    }
  </script>
</head>
<body>
  <a href="#" class="open" onclick="openTest(1);return false;">打开</a>
  <div class="shadow" id='model' onclick="closeTest(1);">
    <div class="model" onclick="event.stopPropagation();">
      <nav>
        <span>对话框标题</span>
        <a href="#" class="close" onclick="closeTest(1);return false;">X</a>
      </nav>
      <section>对话框的内容</section>
      <footer>
        <div class="buttons">
          <a href="#" class="button ok">确定</a>
          <a href="#" class="button" onclick="closeTest(1);return false;">取消</a>
        </div>
      </footer>
    </div>
  </div>
</body>
</html>